<template>
  <div class="page-content">
    <nav-bar title="掌上有信-收件"></nav-bar>
    <tm-tabs
      bg-color="bg-gradient-purple-accent"
      color="green"
      align="left"
      range-key="title"
      v-model="activeIndex"
      :list="list2"
      @change="tabsChange"
    ></tm-tabs>
    <tm-search></tm-search>
    <div class="list-item" @click="lookDetail(list)" v-for="(list, index) in listData" :key="index">
      <div class="item-content">
        <div class="item-left">
          主题
        </div>
        <div class="item-right">
          {{ list.zt }}
        </div>
      </div>
      <div class="item-content">
        <div class="item-left">
          创建时间
        </div>
        <div class="item-right">
          {{ list.createTime }}
        </div>
      </div>
      <div class="item-show-bottm">
        <div class="show-ready">{{ ['', 0].includes(list.pid) ? '未读' : '已读' }}</div>
      </div>
    </div>
    <email-chat ref="emailChatRef" :list="listItem"></email-chat>
  </div>
</template>

<script>
import navBar from '@/components/nav-bar/index.vue'
import emailChat from '@/components/email-chat/index.vue'
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
export default {
  components: {
    navBar,
    emailChat,
    tmButton,
    tmTabs,
    tmSearch,
    tmIcons
  },
  // mixins: [navbar],
  data () {
    return {
      rate: false,
      activeIndex: 0,
      list2:[
        {title:'发件箱'},
        {title:'收件箱'}
      ],
      listData: [],
      listItem: {}
    }
  },
  async onLoad (options) {
    this.listReq()
  },
  computed: {
    userProfile () {
      return this.$store.state.userProfile || {
        userInfo: {}
      }
    }
  },
  methods: {
    async listReq () {
      //  this.listData = await this.$store.dispatch('myxjList', { yjType: this.activeIndex + 1 })
      const listData = await this.$store.dispatch('myxjList', { yjType: this.activeIndex + 1 })
      this.listData = listData.records || []
    },
    tabsChange () {
      this.listReq()
    },
    async lookDetail (list) {
      this.listItem = await this.$store.dispatch('getxjbyld', { id: list.id })
      this.$refs.emailChatRef.open()
    }
  }
}
</script>

<style lang="scss" scoped>
.pages-content {
  overflow: auto;
}
</style>
